<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AudioVisual</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/toastify.min.css">
    <link rel="stylesheet" id="drama-theme" href="assets/css/drama-style.css" disabled>
</head>
<body>
    <div class="container">
        <aside class="sidebar">
            <div class="sidebar-scaler">
                <h1 class="logo">
                    <svg class="logo-icon" width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
                    </svg>
                    AudioVisual
                </h1>
                <div class="controls-wrapper">
                   <div class="control-group">
                       <label for="platform-select">平台导航:</label>
                       <select id="platform-select"></select>
                    </div>
                    <div class="control-group">
                        <label for="api-select">解析接口:</label>
                        <select id="api-select"></select>
                   </div>
                   <button id="parse-button" class="action-button">
                       <div class="button-icon">
                           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                               <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
                           </svg>
                       </div>
                       <div class="button-text">P A R S E !</div>
                   </button>
                </div>
                <div class="control-group no-drag" style="margin-top: 25px;">
                    <button id="drama-mode-button" class="action-button">
                        <div class="button-icon" style="display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;">
                            🌍
                        </div>
                        <div class="button-text">美韩日剧</div>
                    </button>
                </div>
                <div class="drama-controls no-drag">
                    <div class="control-group">
                        <button id="netflix-factory-button" class="action-button">
                            <div class="button-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M5.398 0v.006c3.028 8.556 5.37 15.175 8.348 23.596 2.344.058 4.85.398 4.854.398-2.8-7.924-5.923-16.747-8.487-24zm8.489 0v9.63L18.6 22.951c-.043-7.86-.004-15.913.002-22.95zM5.398 1.05V24c2.873-.12 4.557-.396 4.557-.396 0-8.026-.002-16.064-.002-22.554z"/>
                                </svg>
                            </div>
                            <div class="button-text">奈飞工厂</div>
                        </button>
                    </div>
                    <div class="control-group">
                        <button id="7-movie-button" class="action-button">
                            <div class="button-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2h-2z"/>
                                </svg>
                            </div>
                            <div class="button-text">七点电影</div>
                        </button>
                    </div>
                    <div class="control-group">
                        <button id="kanpian-button" class="action-button">
                            <div class="button-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                    <rect x="2" y="3" width="16" height="14" rx="2" fill="#000000"/>
                                    <rect x="3" y="4" width="14" height="12" fill="#1a1a1a"/>
                                    <polygon points="8,7 8,13 13,10" fill="#ffffff"/>
                                </svg>
                            </div>
                            <div class="button-text">看片狂人</div>
                        </button>
                    </div>
                    <div class="control-group">
                        <button id="gazf-button" class="action-button">
                            <div class="button-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                                    <rect x="1" y="3" width="18" height="14" rx="2" fill="#000000" stroke="#333" stroke-width="1"/>
                                    <rect x="2" y="4" width="16" height="12" fill="#1a1a1a"/>
                                    <rect x="3" y="5" width="6" height="4" fill="#333"/>
                                    <rect x="11" y="5" width="6" height="4" fill="#333"/>
                                    <rect x="3" y="11" width="6" height="4" fill="#333"/>
                                    <rect x="11" y="11" width="6" height="4" fill="#333"/>
                                </svg>
                            </div>
                            <div class="button-text">GAZF</div>
                        </button>
                    </div>
                </div>
                <div class="drama-usage-tips no-drag">
                   <h4>免责声明</h4>
                   <ul>
                       <li>软件为开源项目，如您是花钱购买请向购买平台投诉，一切损失与开发者无关，项目内所有资源均来源于互联网，本项目只做整合，如侵犯您的权益请联系邮箱删除！！</li>
                       <li><strong>Email：</strong><a href="mailto:fenghaoran60@gmail.com">fenghaoran60@gmail.com</a></li>
                   </ul>
                </div>
                <div class="usage-tips">
                   <h4>使用提示</h4>
                   <ul>
                       <li><strong>解析失败:</strong> 请尝试更换上方的解析接口，或检查视频链接是否正确。</li>
                       <li><strong>广告:</strong> 部分解析接口可能会有广告，请耐心等待或更换接口。</li>
                       <li><strong>安全:</strong> 请勿在视频播放页面输入任何个人敏感信息。</li>
                   </ul>
                </div>
                <div class="footer">
                    <div id="update-notification-area" style="margin-bottom: 10px; min-height: 20px;"></div>
                    <div id="update-toast-container" style="margin-bottom: 10px;">
                        <button id="check-update-button" class="action-button">检查更新</button>
                    </div>
                    <a href="https://github.com/RemotePinee/AudioVisual" target="_blank">GitHub Repository</a>
                    <div id="toast-container"></div>
                </div>
            </div>
        </aside>
        
        <main class="main-content">
            <div class="top-bar">
                <div class="browser-controls">
                    <button id="back-button" class="nav-button" disabled title="后退">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
                    </button>
                    <button id="forward-button" class="nav-button" disabled title="前进">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                    </button>
                    <button id="home-button" class="nav-button" title="首页">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12.5l9-9 9 9"></path><path d="M4.5 10.5v9a2 2 0 002 2h11a2 2 0 002-2v-9"></path></svg>
                    </button>
                </div>
                <input type="text" id="url-input" placeholder="将视频链接粘贴于此...">
                <button id="go-button">Go</button>
                <div class="window-controls">
                    <button id="minimize-button" class="window-control-button" title="最小化">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                    </button>
                    <button id="maximize-button" class="window-control-button" title="最大化">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
                    </button>
                    <button id="close-button" class="window-control-button" title="关闭">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                    </button>
                </div>
            </div>
            <div id="youku-custom-page" style="display: none;">
                <div class="icon-container">
                    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"></path>
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"></path>
                    </svg>
                </div>
                <h2>优酷视频解析</h2>
                <p>由于优酷的限制，请在此处直接粘贴视频链接进行解析播放。</p>
                <input type="text" id="youku-url-input" placeholder="请在此输入优酷视频链接...">
                <div class="usage-tips">
                    <h4>使用说明</h4>
                    <ul>
                        <li>1. 在上方输入框中粘贴优酷视频的链接。</li>
                        <li>2. 在左侧选择一个解析接口。</li>
                        <li>3. 点击上方的 "P A R S E !" 按钮开始播放。</li>
                        <li>4. 如需更换接口，在左侧重新选择后再次点击 "P A R S E !" 即可。</li>
                    </ul>
                </div>
            </div>
        </main>
    </div>
    <div id="loading-overlay" class="hidden">
        <div class="spinner"></div>
    </div>
    <script src="./assets/js/toastify.min.js"></script>
    <script src="./assets/js/renderer.js"></script>
</body>
</html>